<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<style>
    .mxnW{
        width: 80%;
        margin: 0 auto;
        margin-top: 20px;
    }.hidden{
        display: none;
         }
    .button {
        display: inline-block;
        outline: none;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        font: 14px/100% Arial, Helvetica, sans-serif;
        padding: .5em 2em .55em;
        text-shadow: 0 1px 1px rgba(0,0,0,.3);
        -webkit-border-radius: .5em;
        -moz-border-radius: .5em;
        border-radius: .5em;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
        -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
        box-shadow: 0 1px 2px rgba(0,0,0,.2);
    }
    .button:hover {
        text-decoration: none;
    }
    .button:active {
        position: relative;
        top: 1px;
    }
</style>
<body>
<form class="layui-form mxnW" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">背景图上传</label>
        <div class="layui-input-block">
            <input type="file"  name="picture" class="layui-upload-file">
            <img id="setImg" style="width: 60px;height: auto" src="" alt="">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" >笔记主题</label>
        <div class="layui-input-inline">
            <input type="text" name="title" required  lay-verify="required" placeholder="知识主题" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">简介</label>
        <div class="layui-input-block">
            <textarea name="abstract" placeholder="请输入简介内容" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button class="layui-btn layui-btn-danger hidden" id="del" lay-submit lay-filter="formdel">删除</button>
        </div>
    </div>
    <div class="layui-form-item">
     <div class="layui-input-block">

     </div>
    </div>
</form>
<script src="../../public/js/jquery.min.js"></script>
<script src="./layui/layui.js"></script>
<script>
    //Demo
    var tpl={
        data:{},
        setData:function () {
            $("#setImg").attr("src",this.data.picture||"");
            $("input[name='title']").val(this.data.title||"");
            $("textarea[name='abstract']").val(this.data.abstract||"");
        },
        getData:function () {
            return {
            }
        }
    }
    if(sessionStorage.hasOwnProperty('notes')){
        tpl.data=JSON.parse(sessionStorage.notes);
        //显示按钮
        $("#del").toggleClass("hidden")
    }
    if(tpl.data&&tpl.data.hasOwnProperty('listid')){
        tpl.setData();
    }
    layui.use('form', function(tpl){
        var form = layui.form();
        //监听提交
        form.on('submit(formDemo)', function(data){
            if($("#setImg").attr("src")){
                data.field.picture=$("#setImg").attr("src");
            }else{
                delete data.field.picture;
            }
            data.field.userid= JSON.parse(sessionStorage.user).userid;
            if(sessionStorage.hasOwnProperty('notes')){
                data.field.listid= JSON.parse(sessionStorage.notes).listid;
                var list=JSON.parse(JSON.parse(sessionStorage.notes).list);
                list.title = data.field.title;
                data.field.list = JSON.stringify(list)
                $.ajax({
                    type: 'POST',
                    url:"/notes/update",
                    data: {data:data.field},
                    success:function (data) {
                        if(data.msg.type==1){
                            layer.msg(data.msg.data);
                        }
                    } ,
                    error:function () {
                        layer.msg("系统错误")
                    }
                })
            }
            else{
                data.field.list=JSON.stringify({
                    title:data.field.title,
                    data: [
                        {label:"根目录", type: "folder", children: [

                        ]}
                    ]
                })
                $.ajax({
                    type: 'POST',
                    url:"/notes/create",
                    data: {data:data.field},
                    success:function (data) {
                        if(data.msg.type==1){
                            layer.msg(data.msg.data);
                        }
                    } ,
                    error:function () {
                        layer.msg("系统错误")
                    }
                })
            }
            return false;
        });
        form.on('submit(formdel)',function (data) {
            $.ajax({
                type: 'POST',
                url:"/notes/delete",
                data: {data:{listid:JSON.parse(sessionStorage.notes).listid}},
                success:function (data) {
                    if(data.msg.type==1){
                        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                        parent.layer.close(index);
                    }
                } ,
                error:function () {
                    layer.msg("系统错误")
                }
            })
            return false;
        })
    });
    layui.use('upload', function(){
        layui.upload({
            url: '/ueditor/ue?action=uploadimage'
            ,success: function(res){
                console.log(res); //上传成功返回值，必须为json格式
                if(res.state=="SUCCESS"){
                    layer.msg('上传成功')
                    $("#setImg").attr("src",location.origin+res.url)
                }else{
                    layer.msg('上传失败')
                }
            }
        });
    });

</script>
</body>
</html>